<script setup>
  import { useRoute } from 'vue-router';
  import { ref, reactive, watch } from 'vue'
  import { PeriodReportInfo } from '@/api/information/periodReport'
  import PDFView from '@/components/PdfPreview.vue'

  const appRoute = useRoute()

  const pdfInfo = reactive({
    title: '这是标题',
  })
  const pdfUrl = ref('')

  watch(()=>appRoute.query.rfid, (nid) => {
    console.log(nid)
    if (!nid) return
    // 获取该ID下的PDF信息
    PeriodReportInfo(nid).then((res) => {
      const data = res.data.data
      pdfInfo.title = data.title
      pdfUrl.value = data.file_url
    })
  }, { immediate: true })
</script>
<template>
  <div class="pdf-page-container">
    <div class="title">{{ pdfInfo.title }}</div>
    <div class="pdf-view">
      <PDFView :pdfUrl="pdfUrl" />
    </div>
  </div>
</template>
<style scoped lang="scss">
  .pdf-page-container {
    .title {
      line-height: 40px;
      text-align: center;
      font-size: 22px;
      font-weight: 600;
    }
    .pdf-view {
      overflow-y: auto;
      height: 100%;
    }
  }
  
</style>